<!DOCTYPE html>
<html>
<head>
    <title>Stacked Blocks Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Dimensions and Positions
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;

        const groundY = 300;
        const L_Yi = 160; // Side length of block Yi (乙)
        const L_Jia = L_Yi / 2; // Side length of block Jia (甲)

        // --- Draw Block Yi (乙) ---
        // Center block Yi horizontally on the canvas
        const yiX = (canvasWidth - L_Yi) / 2;
        // Position block Yi on the ground
        const yiY = groundY - L_Yi;
        ctx.beginPath();
        ctx.rect(yiX, yiY, L_Yi, L_Yi);
        ctx.stroke();

        // --- Draw Block Jia (甲) ---
        // Center block Jia horizontally on block Yi (and thus on the canvas)
        const jiaX = yiX + (L_Yi - L_Jia) / 2;
        // Position block Jia on top of block Yi
        const jiaY = yiY - L_Jia;
        ctx.beginPath();
        ctx.rect(jiaX, jiaY, L_Jia, L_Jia);
        ctx.stroke();

        // --- Draw Labels ---
        // Label '乙'
        ctx.font = '50px serif';
        ctx.fillText('乙', yiX + L_Yi / 2, yiY + L_Yi / 2 + 5); // Minor adjustment for visual centering

        // Label '甲'
        ctx.font = '40px serif';
        ctx.fillText('甲', jiaX + L_Jia / 2, jiaY + L_Jia / 2);

        // --- Draw Ground ---
        const groundStartX = 50;
        const groundEndX = canvasWidth - 50;
        ctx.beginPath();
        ctx.moveTo(groundStartX, groundY);
        ctx.lineTo(groundEndX, groundY);
        ctx.stroke();

        // Draw hatching for the ground
        const hatchLength = 15;
        const hatchSpacing = 20;
        ctx.lineWidth = 1.5; // Thinner lines for hatching
        for (let x = groundStartX; x <= groundEndX; x += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(x, groundY);
            ctx.lineTo(x - 10, groundY + 10);
            ctx.stroke();
        }
        ctx.lineWidth = 2; // Reset line width

        // --- Draw the extra horizontal line on top ---
        // Positioned above and slightly to the left of block Jia
        const extraLineY = jiaY - 20;
        const extraLineStartX = jiaX - 10;
        const extraLineEndX = jiaX + L_Jia * 0.5;
        ctx.beginPath();
        ctx.moveTo(extraLineStartX, extraLineY);
        ctx.lineTo(extraLineEndX, extraLineY);
        ctx.stroke();

    </script>
</body>
</html>